@charset "utf-8";
@import "reset";
$zcm:40;
@function r($px) {
    @return $px/(2*$zcm) * 1rem;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    background: #f2f2f2;
}

header {
    width: 100%;
    height: r(76);
    background: white;
    position: absolute;
    top: 0;
    a:nth-of-type(1) {
        
        display: inline-block;
        color: #000000;
        float: left;
        margin-left: r(28);
        height: r(76);
        line-height: r(76);
        img{
            width: r(22);
            height: r(38);
            vertical-align: top;
            position: relative;
            top: r(18);
        }
    }
    p{
        font-size: r(30);
       text-align: center;
        position: relative;
        line-height: r(76);
        overflow: hidden;
    }
    a:nth-of-type(2) {
        display: inline-block;
        font-size: r(24);
        line-height: r(76);
        color: #000;
        margin-right: r(30);
    }
}

section {
    width: 100%;
    background: white;
    position: absolute;
    top: r(76);
    bottom: r(0);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    article {
        width: 100%;
        .line {
            width: 100%;
            height: r(1);
            border-top: 1px solid #A7A7A7;
            background: #A7A7A7;
        }
        .label-info {
            width: 100%;
            text-align: center;
            line-height: r(38);
            margin-top: r(27);
            a {
                font-size: r(20);
                color: #A3A3A3;
            }
            p {
                font-size: r(24);
                color: #a3a3a3;
            }
        }
        .label {
            margin-top: r(20);
            ul {
                li {
                    float: left;
                    position: relative;
                    margin-left: r(12);
                    margin-bottom: r(10);
                    .label_img {
                        width: r(195);
                        height: r(195);
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    span {
                        font-size: r(24);
                        position: absolute;
                        left: r(66);
                        top: r(86);
                        color: white;
                    }
                     img{
                        width: r(30);
                        height: r(30);
                        background: #000000;  
                    }
                    @mixin icon{
                        position: absolute;
                        bottom: r(-16);
                        right: r(0);
                        display: none;
                    }
                    #icon1{
                        @include icon;
                    }
                     #icon2{
                        position: absolute;
                        bottom: r(-16);
                        right: r(0);
                    }
                     #icon3{
                         @include icon;
                    }
                     #icon4{
                         @include icon;
                    }
                     #icon5{
                         @include icon;
                    }
                     #icon6{
                         @include icon;
                    }
                }
            }
        }
    }
}